<template>
	<div id="clue_import" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				导入账户
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div>
		  			<span>导入文件&nbsp;</span>
		  			<el-input v-model="fileName" style="width: 4rem;"  placeholder="" readonly></el-input>
		  			
		  			<div class="select_btn" @click="selectFile()">选择文件</div>
		  			<!--规定上传excel文件-->
		  			<input type="file" id="file" hidden accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
		  		</div>
		  		<div class="tip">
		  			注：首次上传，请下载 <span class="clue_model" @click="download()">账户模板</span>
		  			 <!--,每次最多上传XX条数据-->
		  		</div>
				
			</div>
			
			<div class="btn_div">
				<div class="btn_sure" @click="importFile()">导 入</div>
			</div>
			
		</div>
	
	</div>
</template>

<script>
var vm,$file;
export default {
	data : function() {
		return {
			show : false,
			open : false,
			fileName : "",
			importBtn : "导 入"
		}
	},
	methods : {
		init : function() {
			vm.show = true;
			vm.open = true;
		},
		initInput : function() {
			$file = $("#file");
			$file.change(function(){
				vm.fileName = $file[0].files[0].name;
			})
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
			},500);
			
			if($file) {
				//清空文件名和文件输入框
				$file.val("");
				vm.fileName= "";
			}
			
		},
		sure : function() {
			vm.$emit('callback');
			vm.show = false;
		},
		selectFile : function() {
			if(!$file) {
				vm.initInput();
			}
			$file.click();
		},
		importFile : function() {
			if(vm.fileName=="") {
				tool.message({ message:'请先选择文件', type:'warning' });
				return;
			}
			vm.importBtn = "导入中";
			
			var param = new FormData();
			param.append("file",$file[0].files[0]);
			// param.append("campusId",vm.$store.state.campusId);
			
			api.importUser(param).then(function(data) {
				
				vm.importBtn = "导 入";
				
				if(data.resultCode==4005) {
					tool.notify.error({ title: '格式有误，导入失败', message: "请使用模板文件填写" });
				}
				
				if(data.resultCode==4011) {
					var msg = "";
					data.info.conflictRow.forEach(function(item) {
						msg += item + "\n";
					})
					tool.notify.error({ title: '数据校验不通过', message: msg , duration : 12000});
				}
				
				if(data.resultCode==2000) {
					vm.cancel();
					vm.$emit('callback');
					var msg = '成功导入'+data.info.successCount+'条账户';
					tool.message({ showClose: true, message: msg, type: 'success'});
				}
				
			})
		},
		download : function() {
			location.href = config.baseUrl+"res/excel/用户模板.xlsx";
		}
	},
	created : function() {
		vm = this;
	}
}
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
	.panel {
		width: 7rem;
	}
	.btn_div {
		width: 1.6rem;
	}
	.btn_sure {
		margin-right: 0;
	}
	.form {
		padding: 0.1rem 0.4rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.select_btn {
		width: 1.2rem;
		height: 0.36rem;
		line-height: 0.36rem;
		color: white;
		background-color: #3885F8;
		margin-right: 0.15rem;
		float: right;
		font-size: 0.16rem;
		text-align: center;
		border-radius: 0.08rem;
		cursor: pointer;
		user-select:none;
	}
	.select_btn:active {
		background-color: rgba(56,133,248,0.8);
	}
	.tip {
		padding-top: 0.12rem;
		padding-left: 0.8rem;
		color: #999999;
	}
	.clue_model {
		text-decoration: underline;
		color: #0000FF;
		cursor: pointer;
	}
</style>